<template>
	<view class="category-pages" :class="themeName">

		<view class="category-content" :style="{height: `${height}px`}">
			<!-- 搜索 -->
			<view class="search-input flex p-20 bg-white">
				<u-search class="flex-1" height="72" bg-color="#F4F4F4" :show-action="false"
					:placeholder="$zhTran('请输入关键字搜索')" @focus="toSearch" />
				<view class="flex m-l-20" @tap="chooseStatus">
					<text>{{status.desc}}</text>
					<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)"></u-icon>
				</view>
			</view>
			<view class="style-nine">
				<left-aside :lists="lists" :selectIndex="selectIndex" @editIndex="editIndex" />
				<view class="right-warp">
					<view v-if="twoListsLength > 0">
						<u-tabs active-color="rgba(64, 115, 250, 1)" :current="selectGoodsIndex" :list="twoLists"
							:bar-width="64" @change="changeActive" v-if="refreshTabs" :font-size="26"></u-tabs>
					</view>
					<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
						<cate-goods v-if="height" :scroll-height="$px2rpx(height)" :goodsStatus="goodsStatus" />
					</scroll-view>
				</view>
			</view>
		</view>

		<u-popup v-model="showVisible" mode="bottom" border-radius="14" :closeable="false"
			:safe-area-inset-bottom="true" @close="closePopup">
			<view class="sort-box">
				<view class="sort-header">{{$zhTran('全部状态')}}</view>
				<view class="sort-main">
					<view :class="status.value === ''?'selected sort-sel':' sort-sel'" @click="statusList('','全部状态')">
						{{$zhTran('全部状态')}}
					</view>
					<view :class="status.value === 0?'selected sort-sel':' sort-sel'" @click="statusList(0,'已下架')">
						{{$zhTran('已下架')}}
					</view>
					<view :class="status.value === 1?'selected sort-sel':' sort-sel'" @click="statusList(1,'已上架')">
						{{$zhTran('已上架')}}
					</view>
				</view>
				<u-gap height="20" bg-color="rgba(246, 247, 249, 1)"></u-gap>
				<view class="sort-footer">
					<button hover-class="none" class="btn btn--cancel" size="md"
						@tap="showVisible=false">{{$zhTran("取消")}}</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		apiGoodsCategory,
	} from '@/api/goods'
	import {
		apiCloudShopStoreInfo,
	} from "@/api/cloudshop"
	import {
		getRect
	} from "@/utils/tools";
	import cateGoods from './goods.vue'
	import leftAside from './left-aside.vue'
	import Cache from '@/utils/cache'
	export default {
		name: 'categoryClsp',
		components: {
			leftAside,
			cateGoods
		},
		data() {
			return {
				height: 0,
				goodsList: [],
				category_id: -1,
				lists: [],
				selectIndex: -1,
				selectGoodsIndex: -1,
				goodsStatus: '',
				clsp_id: '',
				is_error: 0,
				refreshTabs: true,
				status: {
					value: '',
					desc: this.$zhTran('全部状态'),
				},
				showVisible: false,
				clspInfo: {}
			};
		},
		onLoad() {
			const {
				clsp_id,
				is_error
			} = this.$Route.query
			this.clsp_id = clsp_id
			this.is_error = is_error
			if (is_error == 1) {
				uni.setNavigationBarTitle({
					title: this.$zhTran('问题商品'),
				});
			} else {
				if (this.$Route.meta.atitle) {
					uni.setNavigationBarTitle({
						title: this.$zhTran(this.$Route.meta.atitle)
					})
				}
			}

			this.getLists()
			this.getCloudShopInfo()

			this.$nextTick(() => {
				this.getHeight();
			});
		},
		computed: {
			twoLists() {
				const {
					lists,
					selectIndex
				} = this
				return lists[selectIndex] ? lists[selectIndex].sons : []
			},
			twoListsLength() {
				return this.twoLists ? this.twoLists.length : 0
			}
		},
		watch: {
			selectIndex(val) {
				this.category_id = this.lists[val].id || 0
				this.selectGoodsIndex = 0
				this.refreshTabs = false
				this.$nextTick(function() {
					this.refreshTabs = true;
				})
			},
			selectGoodsIndex(val) {
				if (this.lists[this.selectIndex].sons != undefined)
					this.category_id = this.lists[this.selectIndex].sons[val].id || 0;
			},
		},
		methods: {
			getCloudShopInfo() {
				apiCloudShopStoreInfo().then(res => {
					this.clspInfo = this.$zhTran(res);
					Cache.set('clspInfo', this.clspInfo)
				})
			},
			getLists() {
				apiGoodsCategory().then(res => {
					this.lists = this.$zhTran(res.lists)
					this.selectIndex = 0
					this.selectGoodsIndex = 0
				})
			},
			editIndex(idx) {
				this.selectIndex = idx
			},
			changeActive(idx) {
				this.selectGoodsIndex = idx
			},
			async getHeight() {
				const category = await getRect(".category-content");
				this.height = category.height - 100;
			},
			toSearch() {
				this.$Router.push({
					path: '/bundle2/pages/cloud_shop/goods/goods_search',
					query: {
						store_id: this.clsp_id,
						is_error: this.is_error
					}
				})
			},
			closePopup() {
				this.showVisible = false
			},
			chooseStatus() {
				this.showVisible = true
			},
			statusList(row, desc) {
				this.status.value = row
				this.status.desc = this.$zhTran(desc)
				this.goodsStatus = row
				this.closePopup()
			},
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(res) {
			const {
				share_image,
				share_title
			} = this.appConfig
			const {
				code
			} = this.userInfo

			console.log(this.clspInfo)

			let shareobj = {
				title: share_title,
				path: `/pages/index/index?invite_code=${code}&clspId=${this.clsp_id}`,
				imageUrl: this.clspInfo.avatar || share_image
			}

			//来自页面按钮内的分享
			if (res.from === 'button') {
				const {
					name,
					image,
					goodsid
				} = res.target.dataset
				shareobj.title = name //你要分享的标题
				shareobj.path =
					`/bundle2/pages/goods_detail/goods_detail?id=${goodsid}&clspId=${this.clsp_id}`
				shareobj.imageUrl = this.clspInfo.avatar || image //你要分享的图片
			}

			shareobj = this.$zhTran(shareobj)
			console.log('res', res)
			console.log('shareobj', shareobj)

			return shareobj
		},
		// #endif

	};
</script>

<style lang="scss">
	/*根元素需要有固定的高度*/
	page {
		height: 100%;
		box-sizing: border-box;
		// 支付宝小程序,钉钉小程序需添加绝对定位,否则height:100%失效: https://opendocs.alipay.com/mini/framework/acss#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98
		/* #ifdef MP-ALIPAY || MP-DINGTALK*/
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		/* #endif */
		/*需给父元素设置height:100%*/
		.category-pages {
			height: 100%;
			display: flex;
			flex-direction: column;
			background-repeat: no-repeat;
			background-size: 100% auto;

			/* 中间 */
			.category {
				flex: 1;
				min-width: 0;
				min-height: 0;
				/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
				display: flex;
				flex-direction: column;
			}
		}

		.category-content {
			flex: 1;
			min-width: 0;
			min-height: 0;
			/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
			display: flex;
			flex-direction: column;
			height: 100%;

			.wrap {
				min-width: 0;
				min-height: 0;
				/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
				display: flex;
				flex: 1;
				height: 100%;
			}
		}

		.style-nine {
			flex: 1;
			min-width: 0;
			min-height: 0;
			/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
			display: flex;
			height: 100%;
			width: 750rpx;

			// 右边
			.right-warp {
				flex: 1;
				min-width: 0;
				overflow: hidden
			}
		}
	}

	.sort {

		&-header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			padding: 0 30rpx;
			font-weight: bold;
			font-size: 32rpx;
			background-color: #FFFFFF;
		}

		&-main {
			padding: 0 30rpx 30rpx 30rpx;

			.sort-sel {
				color: rgba(56, 56, 56, 1);
				background-color: rgba(246, 247, 249, 1);
				font-size: 28rpx;
				padding: 30rpx;
				text-align: center;
				margin-bottom: 15rpx;

				&.selected {
					color: #fff;
					background-color: rgba(64, 115, 250, 1);
				}
			}
		}

		&-footer {
			padding: 0 20rpx env(safe-area-inset-bottom);
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			background-color: #fff;

			.btn {
				flex: 1;

				&--cancel {
					color: rgba(38, 38, 38, 1);
				}
			}
		}
	}
</style>